<!-- 封禁设备 -->
<template>
    <div class="ele-body">
      <el-card shadow="never">
        <!-- 搜索表单 -->
        <el-form
          :model="where"
          label-width="77px"
          class="ele-form-search"
          @keyup.enter.native="reload"
          @submit.native.prevent
        >
          <el-row :gutter="15">
            <el-col :lg="8" :md="12">
              <el-form-item label="设备名称:">
                <el-input
                  v-model="where.device"
                  placeholder="请输入设备名称"
                ></el-input>
              </el-form-item>
            </el-col>
  
            <el-col :lg="16" :md="16">
                <div style="display: flex;margin-bottom: 10px;">
                    <el-button
                        type="primary"
                        icon="el-icon-search"
                        class="ele-btn-icon"
                        @click="reload"
                        >查询
                    </el-button>
                    <el-button @click="reset">重置</el-button>
                    <el-upload
                            accept=".xls,.xlsx"
                            class="upload-demo"
                            :action="uploadImgUrl"
                            :on-preview="handlePreview1"
                            :on-remove="handleRemove1"
                            :on-success="successUpload1"
                            :before-remove="beforeRemove"
                            multiple
                            :limit="1"
                            :headers="myHeaders"
                            :on-exceed="handleExceed"
                            :file-list="fileList1"
                            style="margin-left: 10px;"
                        >
                            <el-button
                            icon="el-icon-upload2"
                            class="ele-btn-icon"
                            >
                            导入设备
                            </el-button>
                        </el-upload>
                        <el-button
                            type="primary"
                            icon="el-icon-download"
                            size="small"
                            style="margin-left: 10px;"
                            @click="updateAuto()"
                        >
                            下载模板
                        </el-button>
                </div>
            </el-col>
          </el-row>
        </el-form>
        <!-- 数据表格 -->
        <ele-pro-table
          ref="table"
          :where="where"
          :datasource="url"
          :columns="columns"
          :selection.sync="selection"
          height="calc(100vh - 315px)"
        >
          <!-- 表头工具栏 -->
          <template slot="toolbar">
            <el-button
              size="small"
              type="primary"
              icon="el-icon-plus"
              class="ele-btn-icon"
              @click="openEdit(null)"
              >添加
            </el-button>
          </template>
          <!-- 操作列 -->
          <template slot="action" slot-scope="{ row }">
            <el-link
              type="primary"
              :underline="false"
              icon="el-icon-edit"
              @click="openEdit(row)"
              >修改
            </el-link>
            <el-link
              :underline="false"
              icon="el-icon-delete"
              @click="remove(row)"
              >删除
            </el-link>
          </template>
        </ele-pro-table>
      </el-card>
      <!-- 编辑弹窗 -->
      <sealDeviceEdit :data="current" :visible.sync="showEdit" @done="reload" />
    </div>
  </template>
  
  <script>
import sealDeviceEdit from './sealDevice-edit.vue'
import setting from '@/config/setting'
  export default {
    name: 'ExamApp',
    components: { sealDeviceEdit },
    data() {
      let token = setting.takeToken()
      return {
        // 表格数据接口
        url: '/Sealdevice/index',
        // 表格列配置
        columns: [
          {
            prop: 'device',
            label: '设备',
            align: 'center',
            showOverflowTooltip: true,
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 150,
            align: 'center',
            resizable: false,
            slot: 'action',
          }
        ],
        // 表格搜索条件
        where: {},
        // 表格选中数据
        selection: [],
        // 当前编辑数据
        current: null,
        // 是否显示编辑弹窗
        showEdit: false,
        uploadImgUrl: process.env.VUE_APP_API_BASE_URL + '/upload/uploadFile',
        myHeaders: { Authorization: token },
        fileList1:[],
      }
    },
    methods: {
      /* 刷新表格 */
      reload() {
        this.$refs.table.reload({ where: this.where })
      },
      /* 重置搜索 */
      reset() {
        this.where = {}
        this.reload()
      },
      /* 显示编辑 */
      openEdit(row) {
        this.current = row
        this.showEdit = true
      },
      /* 删除 */
      remove(row) {
        const loading = this.$loading({ lock: true })
        this.$http
          .post('/Sealdevice/delete', { id: row.id })
          .then((res) => {
            loading.close()
            if (res.data.code === 0) {
              this.$message.success(res.data.msg)
              this.reload()
            } else {
              this.$message.error(res.data.msg)
            }
          })
          .catch((e) => {
            loading.close()
            this.$message.error(e.message)
          })
      },
      // 导入
      handlePreview1(file) {
            console.log(file)
        },
        handleRemove1() {
            this.fileList1 = []
        },
        successUpload1(response) {
            this.$set(this.fileList1, this.fileList1.length, {
                file_name: response.data.file_name,
                save_name: response.data.save_name,
                file_size: response.data.file_size,
                name: response.data.file_name
            })
            let url = response.data.save_name
            this.$http
                .post('Sealdevice/import_', { url: url })
                .then((res) => {
                if (res.data.code === 0) {
                    this.$message.success(res.data.msg)
                    this.fileList1 = []
                    this.reload()
                } else {
                    this.$message.error(res.data.msg)
                    this.fileList1 = []
                    this.reload()
                }
                })
        },
        // 下载自动结算模板
        updateAuto(){
            window.location.href = `${process.env.VUE_APP_API_BASE_URL}/static/template/device_template.xls`
        },
    }
  }
  </script>
  
  <style scoped>
  </style>
  